<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            border: 10px solid red;
            background-image: url("images/img.jpg");
            background-repeat: no-repeat;
            background-position: 20px;
        }
    </style>
</head>
<body>
        <!--
            background-position : x y;     背景图片的位置；
                     传数值：   背景图片离左上角的距离；
                               x   :
                                    正值       从容器的左向右移动的距离
                                    负值       从容器的左向左移动的距离
                               y   ：
                                    正值       丛容器的上面向下移动的距离
                                    负值       从容器的上面向上移动的距离

                     传关键字：
                               x   ：
                                    left       图片在容器的左边
                                    center     图片在容器x轴的中心
                                    right      图片在容器x轴的右边
                               y   :
                                    top        图片在容器的上边
                                    center     图片在容器y轴的中心
                                    bottom     图片在容器的下边

                       如果只传一个值得话，那另一个值默认是center；
                       如果两个值都不写的话，那默认为0 0点，也就是左上角；

        -->
        <div>

        </div>
</body>
</html>